<template>
	<view class="page">
			<view class="head">
			<image class="logo" src="../../static/ailogo.png" mode=""></image>
			<view class="head_title">
				Hi!
			</view>
			<view class="head_subtitle">
				赶紧开始试一试把！
			</view>
		</view>
		<view class="application_title">
			AI原生应用
		</view>
		<view class="gptlist">
			<view :class="['gptbox',index==activePlatform ? 'active' : '']" v-for="(item,index) in gptlist" :key="index"
				@click="activeGPT(item,index)">
				<text>{{item.name}}</text>
			</view>
		</view>
		<view class="application_title">
			AI生活应用
		</view>
		<view class="applicationList">
			<view :class="['applicationBox',index==activeLife ? 'activeBox' : '']"
				v-for="(item,index) in lifeApplicationList" :key="index" @click="activeAPP(item,index)">
				<image class="logo" :src="!item.filePath || item.filePath == ''?'../../static/yytx.png':item.filePath" mode=""></image>
				<view class="title">
					{{item.aiuseTitle}}
				</view>
				<view class="label">
					{{item.aiuseContent}}
				</view>
				<view class="look" @click="gotoPage('/pages/aiuse/writing/index?aiuseId='+item.aiuseId+'&platformId='+selectedPlatformId)">
					去查看
				</view>
			</view>
		</view>
		<view class="application_title">
			AI创造应用
		</view>
		<view class="applicationList">
			<view :class="['applicationBox',index==activeCreate ? 'activeBox' : '']"
				v-for="(item,index) in createApplicationList" :key="index" @click="activeCreateApplication(item,index)">
				<image class="logo" :src="!item.filePath || item.filePath == ''?'../../static/yytx.png':item.filePath" mode=""></image>
				<view class="title">
					{{item.aiuseTitle}}
				</view>
				<view class="label">
					{{item.aiuseContent}}
				</view>
				<view class="look" @click="gotoPage('/pages/aiuse/writing/index?aiuseId=' + item.aiuseId + '&platformId='+ selectedPlatformId)">
					去查看
				</view>
			</view>
		</view>
		<view class="application_title">
			AI图片创作
		</view>
		<view class="applicationList">
			<view :class="['applicationBox',index==activeImage ? 'activeBox' : '']"
				v-for="(item,index) in imageApplicationList" :key="index" @click="activeImageCreateApplication(item,index)">
				<image class="logo" :src="!item.filePath || item.filePath == ''?'../../static/yytx.png':item.filePath" mode=""></image>
				<view class="title">
					{{item.aiuseTitle}}
				</view>
				<view class="label">
					{{item.aiuseContent}}
				</view>
				<view class="look" @click="gotoPage('/pages/aiuse/painting/index?aiuseId=' + item.aiuseId + '&platformId='+ selectedPlatformId)">
					去查看
				</view>
			</view>
		</view>
	</view>
	<tabBar></tabBar>
</template>

<script>
	export default {
		data() {
			return {
				activePlatform: 0,
				selectedPlatformId: '',
				activeLife:0,
				activeCreate: 0,
				activeImage:0,
				gptlist: [],
				lifeApplicationList: [],
				imageApplicationList:[],
				createApplicationList:[]
			}
		},

		onLoad() {
			this.getApplicationPlatform();
			this.getApplications(3);//生活应用
			this.getApplications(4);//AI图片创作
			this.getApplications(5);//AI创作应用
		},
		methods: {
			//设置选中的平台ID
			activeGPT(item, index) {
				console.log(item)
				this.activePlatform = index;
				// this.selectedPlatformId = item.platformId;
				uni.navigateTo({
					url: "/pages/aiuse/native/index?value=" + item.name + "&platformId=" + item.platformId
				})
			},
			activeAPP(e, index) {
				this.activeLife = index
			},
			activeCreateApplication(e, index) {
				this.activeCreate = index
			},
			activeImageCreateApplication(e, index) {
				this.activeImage = index
			},
			/*获取数据*/
			getApplicationPlatform() {
				let self = this;
				self._get('plus/aiuse/aiuse/platform', {
					pageIndex: 1,
					isHot: 1,
					sortPrice: 0,
					pageSize: 9,
				}, function(res) {
					self.gptlist = res.data.records;
					// if(self.gptlist.length > 0 && (!self.selectedPlatformId || self.selectedPlatformId == '')){
					// 	self.selectedPlatformId = self.gptlist[0].platformId;
					// }
				});
			},
			/*获取数据*/
			getApplications(categoryId) {
				let self = this;
				self._get('plus/aiuse/aiuse/index', {
					pageIndex: 1,
					sortPrice: 0,
					pageSize: 6,
					categoryId:categoryId
				}, function(res) {
					if(categoryId == 3){//AI生活应用
						self.lifeApplicationList = res.data.records;
					}else if(categoryId == 4){//AI图片创作
						self.imageApplicationList = res.data.records;
					}else if(categoryId == 5){//AI创作应用
						self.createApplicationList = res.data.records;
					}
				});
			},
		}
	}
</script>

<style>
	page{
		background-color: white;
	}
</style>
<style lang="scss" scoped>
	.head {
		width: 750rpx;
		height: 910rpx;
		background-image: url('../../static/aiyybg.png');
		background-size: 100% 100%;
		margin-bottom: 44rpx;

		.head_title {
			position: absolute;
			top: 693rpx;
			left: 150rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}

		.head_subtitle {
			position: absolute;
			top: 750rpx;
			left: 150rpx;
			font-size: 24rpx;
			color: #999999;
		}

		.logo {
			width: 240rpx;
			height: 64rpx;
			margin-left: 30rpx;
			padding-top: 95rpx;
		}
	}

	.application_title {
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		line-height: 50rpx;
		margin-bottom: 30rpx;
		margin-left: 37rpx;
	}

	.gptlist {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 25rpx 78rpx 25rpx;

		.gptbox {
			text-align: center;
			width: 220rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			font-weight: 300;
			font-size: 30rpx;
			color: #333333;
		}

		.active {
			background: #2168EA;
			color: #FFFFFF;
			font-weight: 800;
			font-size: 32rpx;
		}
	}

	.applicationList {
		margin: 0 25rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 47rpx;

		.applicationBox {
			text-align: center;
			display: flex;
			align-items: center;
			flex-direction: column;
			width: 220rpx;
			background: #F6F6F6;
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.logo {
				width: 110rpx;
				height: 110rpx;
				margin-top: 25rpx;
			}

			.title {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				margin-top: 15rpx;
			}

			.label {
				font-size: 24rpx;
				color: #999999;
			}

			.look {
				text-align: center;
				width: 120rpx;
				height: 50rpx;
				line-height: 50rpx;
				background: #D3D3D3;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				border-radius: 15rpx;
				margin: 0 auto;
				margin-top: 35rpx;
				margin-bottom: 33rpx;
			}
		}

		.activeBox {
			background-image: url('../../static/yybj2.png');
			background-size: 100% 100%;

			.title {
				color: #FFFFFF;
			}

			.label {
				color: #FFFFFF;
			}

			.look {
				background: #FFFFFF;
				color: #0F4BCB;
			}
		}
	}

	.applicationList::after {
		content: "";
		width: 220rpx;
	}
</style>